<!DOCTYPE html>
<html class="ui-page-login">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/style.css" rel="stylesheet" />
    <style>
      .area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.yzm #password{
        width: 38%;
        float: none;
        padding-left: 7px;
      }
      .yzm button {
        font-family: 'Helvetica Neue',Helvetica,sans-serif;
        line-height: .8 !important;
        float: right;
        margin-top: 3px;
        margin-right: 5px;
        width: auto !important;
        min-width: 90px !important;
        padding: 10px 10px !important;
      }
      .form>div>label>img{
        width: 20px;
        display: inline-block;
      }
      .form>div>label>span{
        position: relative;
        top: -4px;
        left: 8px;
      }
		</style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">注册</h1>
    </header>
    <div class="mui-content">
      <form class="mui-input-group form">
        <div class="mui-input-row">
          <label><img src="../../images/shoujihao-2.png" alt=""><span>手机号</span></label>
          <input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号">
        </div>
        <div class="mui-input-row yzm">
          <label><img src="../../images/yanzhengma.png" alt=""><span>验证码</span></label>
          <input id='password' type="text" class="mui-input-clear mui-input" placeholder="请输入验证码">
          <button type="button" id="yzm-btn" class="mui-btn mui-btn-blue">获取验证码</button>
        </div>
        <div class="mui-input-row">
          <label><img src="../../images/mima.png" alt=""><span>登录密码</span></label>
          <input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
        </div>
        <div class="mui-input-row">
          <label><img src="../../images/zhifubao.png" alt=""><span>支付宝账号</span></label>
          <input id='zfb' type="text" class="mui-input-clear mui-input" placeholder="用于提现">
        </div>
        <div class="mui-input-row">
          <label><img src="../../images/xingming-2.png" alt=""><span>姓名</span></label>
          <input id='name' type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">
        </div>
        <div class="mui-input-row">
          <label><img src="../../images/tuijianren.png" alt=""><span>推荐人</span></label>
          <input id='recommend' type="text" class="mui-input-clear mui-input" placeholder="请输入推荐人">
        </div>
      </form>
      <div class="mui-content-padded">
        <button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
      </div>
    </div>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/app.js"></script>
    <script src="../../js/jquery-2.1.0.js"></script>
    <script>
      var timer_id
      var yzmBtn = $('#yzm-btn')
      mui('.yzm').on('tap', '#yzm-btn', function() {
        mui.toast('请注意查收短信')
        yzmBtn.attr('disabled', 'true')
        timer() // 启动定时器
      })

      function timer() {
        var count = 120
        timer_id = setInterval(function() {
          if (count === 0) {
            clearInterval(timer_id)
            yzmBtn.removeAttr('disabled')
            yzmBtn.html('获取验证码')
            return false
          }
          count--
          yzmBtn.html(count)
        }, 1000)
      }
    </script>
  </body>

</html>
